<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="类型" prop="iTroubleshooting">
        <common-check-type-select v-model="queryParams.iTroubleshooting" :parentId="0" placeholder="请输入选择类型"></common-check-type-select>
      </el-form-item>
      <el-form-item label="部位" prop="iPart">
        <common-check-type-select v-model="queryParams.iPart" :parentId="queryParams.iTroubleshooting" placeholder="请输入选择部位"></common-check-type-select>
      </el-form-item>
      <el-form-item label="损坏程度" prop="damageLevel">
        <dict-select v-model="queryParams.damageLevel" dict="jl_cases_damage_level" placeholder="请选择损坏程度"></dict-select>
      </el-form-item>
      <el-form-item label="修复方式" prop="repairMethod">
        <dict-select v-model="queryParams.repairMethod" dict="jl_cases_repair_method" placeholder="请选择修复方式"></dict-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane :label="'待接收（'+ page2.total +'）'" name="2">
        <el-table v-loading="loading2" :row-style="rowStyle" :highlight-current-row="true" :data="tableData2">
          <el-table-column type="index" :index="(index)=>tableIndex(page2.pageSize,page2.pageNum,index)" label="序号" align="center" />
          <el-table-column label="路线名称" align="center" prop="roadName" width="150" />
          <el-table-column label="类型" align="center" prop="iTroubleshooting" width="150">
            <template slot-scope="scope">
              {{getCheckTypeName(scope.row.iTroubleshooting)}}
            </template>
          </el-table-column>
          <el-table-column label="部位" align="center" prop="iPart" width="150">
            <template slot-scope="scope">
              {{getCheckTypeName(scope.row.iPart)}}
            </template>
          </el-table-column>
          <el-table-column label="位置桩号" align="center" prop="locationNum" width="150"></el-table-column>
          <el-table-column label="损坏程度" align="center" prop="damageLevel" width="150">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.jl_cases_damage_level" :value="scope.row.damageLevel"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="dataStatus" width="150">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.jl_data_status" :value="scope.row.dataStatus"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="修复方式" align="center" prop="repairMethod" width="150">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.jl_cases_repair_method" :value="scope.row.repairMethod"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="排查时间" align="center" prop="troubleshootingTime" width="150" />
          <el-table-column label="提交时间" align="center" prop="createTime" width="180" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-takeaway-box" @click="handleReceive(scope.row)">接收</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="page2.total > 0" :total="page2.total" :page.sync="page2.pageNum" :limit.sync="page2.pageSize" @pagination="getList2" />
      </el-tab-pane>
      <el-tab-pane :label="'已接收（'+ page3.total +'）'" name="3">
        <el-table v-loading="loading3" :row-style="rowStyle" :highlight-current-row="true" :data="tableData3">
          <el-table-column type="index" :index="(index)=>tableIndex(page3.pageSize,page3.pageNum,index)" label="序号" align="center" />
          <el-table-column label="路线名称" align="center" prop="roadName" />
          <el-table-column label="类型" align="center" prop="iTroubleshooting" width="150">
            <template slot-scope="scope">
              {{getCheckTypeName(scope.row.iTroubleshooting)}}
            </template>
          </el-table-column>
          <el-table-column label="部位" align="center" prop="iPart" width="150">
            <template slot-scope="scope">
              {{getCheckTypeName(scope.row.iPart)}}
            </template>
          </el-table-column>
          <el-table-column label="位置桩号" align="center" prop="locationNum" width="150"></el-table-column>
          <el-table-column label="损坏程度" align="center" prop="damageLevel" width="150">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.jl_cases_damage_level" :value="scope.row.damageLevel"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="dataStatus" width="150">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.jl_data_status" :value="scope.row.dataStatus"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="修复方式" align="center" prop="repairMethod" width="150">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.jl_cases_repair_method" :value="scope.row.repairMethod"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="排查时间" align="center" prop="troubleshootingTime" width="150" />
          <el-table-column label="提交时间" align="center" prop="createTime" width="180" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="page3.total > 0" :total="page3.total" :page.sync="page3.pageNum" :limit.sync="page3.pageSize" @pagination="getList3" />
      </el-tab-pane>
    </el-tabs>

    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" width="800px" append-to-body :before-close="handleClose">
      <trouble-shooting-detail v-if="form.messageType == 1" :form="form" :dataStatus="dataStatus"></trouble-shooting-detail>
      <trouble-shoot-detail v-else :form="form" :dataStatus="dataStatus"></trouble-shoot-detail>
      <el-form v-if="dataStatus == 5" ref="form" :model="form" :rules="rules" label-width="120px" size="mini">
        <div class="form-title">接收信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="接收人" prop="receiveUserName">
              {{form.receiveUserName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="验收天数" prop="acceptanceDays">
              <el-input type="number" v-model="form.acceptanceDays" placeholder="请输入验收天数" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合格数量" prop="qualifiedNum">
              <el-input type="number" v-model="form.qualifiedNum" placeholder="请输入合格数量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="不合格数量" prop="unqualifiedNum">
              <el-input type="number" v-model="form.unqualifiedNum" placeholder="请输入不合格数量" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="接收照片" prop="picIds">
              <image-upload v-model="form.acceptancePicIds" :isShowTip="!isDisabled" :limit="100" :fileSize="1000" :isDisabled="isDisabled" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="接收意见" prop="receiveMessage">
              <el-input type="textarea" v-model="form.receiveMessage" placeholder="请输入接收意见" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="!isDisabled">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <trouble-shoot-detail-dialog ref="troubleShootDetailDialog" title="排查接收--详情"></trouble-shoot-detail-dialog>
    <trouble-shooting-detail-dialog ref="troubleShootingDetailDialog" title="排查接收--详情"></trouble-shooting-detail-dialog>
  </div>
</template>

<script>
import {
  listTroubleShooting,
  getTroubleShooting,
  updateTroubleShooting,
} from "@/api/cases/troubleShooting";
import CommonCheckTypeSelect from '../../../components/Select/CommonCheckTypeSelect.vue';
import DictSelect from '../../../components/Select/DictSelect.vue';
import DeptUserSelect from '../../../components/Select/DeptUserSelect.vue';
import { listCommonCheckType } from '@/api/cases/commonCheckType'
import { mapGetters } from 'vuex';
import MaintainWorkProjectSelect from '../../../components/Select/MaintainWorkProjectSelect.vue';
import TroubleShootingDetail from '../../../components/Detail/troubleShootingDetail.vue';
import TroubleShootDetailDialog from '../../../components/Dialog/troubleShootDetailDialog.vue';
import TroubleShootingDetailDialog from '../../../components/Dialog/troubleShootingDetailDialog.vue';
import TroubleShootDetail from '../../../components/Detail/troubleShootDetail.vue';

export default {
  name: "troubleShooting",
  dicts: ["jl_cases_damage_level", "jl_cases_repair_method", "jl_data_status", "jl_measurement_unit"],
  components: { DictSelect, CommonCheckTypeSelect, DictSelect, DeptUserSelect, MaintainWorkProjectSelect, TroubleShootingDetail, TroubleShootDetailDialog, TroubleShootingDetailDialog, TroubleShootDetail },
  data() {
    return {
      // 禁用表单
      isDisabled: false,
      // 遮罩层
      loading2: true,
      // 遮罩层
      loading3: true,
      // 表格数据
      tableData2: [],
      // 表格数据
      tableData3: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        iTroubleshooting: void 0,
        iPart: void 0,
        damageLevel: void 0,
        repairMethod: void 0,
      },
      //表格2的分页
      page2: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      //表格3的分页
      page3: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {
        id: void 0,
        roadName: void 0,
        troubleshootingDirection: void 0,
        locationPileNumberBegin: void 0,
        locationPileNumberEnd: void 0,
        iTroubleshooting: void 0,
        iPart: void 0,
        locationNum: void 0,
        damageLevel: void 0,
        damageNum: void 0,
        numUnit: void 0,
        description: void 0,
        repairMethod: void 0,
        troubleshootingTime: void 0,
        picIds: void 0,
        auditUserId: void 0,
        deptId: void 0,
        dataStatus: void 0,
        auditMessage: void 0,
        assignorUserId: void 0,
        quantitativeTypeId: void 0,
        ownPersonnel: [],
        outSourceNum: void 0,
        receiveUserId: void 0,
        qualifiedNum: void 0,
        unqualifiedNum: void 0,
        acceptancePicIds: [],
        receiveMessage: void 0
      },
      //检查类型
      checkTypes: [],
      //当前激活的tab
      activeName: "2",
      dataStatus: void 2
    };
  },
  async created() {
    await this.getCheckTypes();
    this.getList2();
    this.getList3();
  },
  computed: {
    ...mapGetters(["userId"]),
    // 表单校验
    rules() {
      return {
        acceptanceDays: [
          { required: true, message: "验收天数不能为空", trigger: "blur" },
        ],
        qualifiedNum: [
          { required: true, message: "合格数量不能为空", trigger: "blur" },
        ],
        unqualifiedNum: [
          { required: true, message: "不合格数量不能为空", trigger: "blur" },
        ],
        receiveMessage: [
          { required: true, message: "接收意见不能为空", trigger: "blur" },
        ],
      }
    },
  },
  watch: {
  },
  methods: {
    /** 查询排查审核管理列表 */
    getList2() {
      this.loading2 = true;
      let params = Object.assign({}, this.queryParams, this.page2, {
        dataStatusList: 5,
        receiveUserId: this.userId
      })
      listTroubleShooting(params).then((response) => {
        this.tableData2 = response.rows;
        this.page2.total = response.total;
        this.loading2 = false;
      });
    },
    /** 查询排查审核管理列表 */
    getList3() {
      this.loading3 = true;
      let params = Object.assign({}, this.queryParams, this.page3, {
        dataStatusList: [6, 7],
        receiveUserId: this.userId
      })
      listTroubleShooting(params).then((response) => {
        this.tableData3 = response.rows;
        this.page3.total = response.total;
        this.loading3 = false;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: void 0,
        roadName: void 0,
        troubleshootingDirection: void 0,
        locationPileNumberBegin: void 0,
        locationPileNumberEnd: void 0,
        iTroubleshooting: void 0,
        iPart: void 0,
        locationNum: void 0,
        damageLevel: 1,
        damageNum: void 0,
        numUnit: void 0,
        description: void 0,
        repairMethod: 1,
        troubleshootingTime: void 0,
        picIds: void 0,
        auditUserId: void 0,
        deptId: this.form.deptId,
        dataStatus: void 0,
        auditMessage: void 0,
        assignorUserId: void 0,
        quantitativeTypeId: void 0,
        ownPersonnel: [],
        outSourceNum: void 0,
        receiveUserId: void 0,
        qualifiedNum: void 0,
        unqualifiedNum: void 0,
        acceptancePicIds: [],
        receiveMessage: void 0
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.page2.pageNum = 1;
      this.page3.pageNum = 1;
      this.getList2();
      this.getList3();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查看 */
    handleDetail(row) {
      this.reset();
      this.isDisabled = true;
      const id = row.id;
      getTroubleShooting(id).then((response) => {
        let form = response.data;
        if(form.messageType == 1){
          this.$refs.troubleShootingDetailDialog.open(form)
        }else{
          this.$refs.troubleShootDetailDialog.open(form)
        }
      });
    },
    /**
     * 接收
     */
    handleReceive(row) {
      this.reset();
      this.isDisabled = false;
      const id = row.id;
      getTroubleShooting(id).then((response) => {
        this.form = response.data;
        this.dataStatus = this.form.dataStatus;
        this.form.qualifiedNum = this.form.taskNum;
        this.form.unqualifiedNum = 0;
        this.form.acceptanceDays = 1;
        this.form.dataStatus = '6';
        this.open = true;
        this.title = "接收";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (Number(this.form.qualifiedNum) + Number(this.form.unqualifiedNum) != Number(this.form.taskNum)) {
            this.$modal.msgError("请确认合格数量与不合格数量是否填写正确");
            return;
          }
          let params = Object.assign({}, this.form)
          updateTroubleShooting(params).then(({ code, data, msg }) => {
            if (code == 200) {
              this.$modal.msgSuccess("接收完成");
              this.handleClose();
              this.getList2();
              this.getList3();
            } else {
              this.$modal.msgError(msg);
            }
          });
        }
      });
    },
    /**
     * 行样式
     */
    rowStyle() {
      return {
        "cursor": "pointer"
      }
    },
    /**
     * 获取类型
     */
    getCheckTypes() {
      let params = {
        status: 0,
        delFlag: 0
      }
      return new Promise((resolve, reject) => {
        listCommonCheckType(params).then(res => {
          this.checkTypes = res.data;
          resolve()
        }).catch(() => {
          this.checkTypes = [];
          reject()
        })
      })
    },
    /**
     * 获取检查的名称
     */
    getCheckTypeName(checkType) {
      let index = this.checkTypes.findIndex((item) => {
        return item.id == checkType;
      })
      if (index > -1) {
        return this.checkTypes[index].checkTypeName
      } else {
        return ""
      }
    },
    /**
     * 处理关闭
     */
    handleClose() {
      this.cancel();
    },
    /**
     * 处理标签点击
     */
    handleTabClick() {
      if (this.activeName == "2") {
        this.getList2();
      } else {
        this.getList3();
      }
    },
    /**
     * 隐藏
     */
    cancel() {
      this.open = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.form-title {
  padding: 2px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}
.input-sperator {
  margin-right: 10px;
  margin-left: 10px;
  padding-bottom: 18px;
  line-height: 29px;
}
</style>
